<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title data-l10n-id="tunnel-setup-title">Choose Web Address - WebThings Gateway</title>
    <link rel="manifest" href="../app.webmanifest">
    <link rel="icon" href="/images/icon.png" type="image/png" />
    <link rel="stylesheet" type="text/css" href="/css/app.css" />
    <link rel="stylesheet" type="text/css" href="/css/subdomain-form.css" />
  </head>
  <body>
    <img id="wordmark" src="/images/wordmark.svg" data-l10n-id="wordmark"/>
    <form id="create-subdomain-form" class="subdomain-form">
      <h1 data-l10n-id="tunnel-setup-welcome"></h1>
      <p data-l10n-id="tunnel-setup-choose-address"></p>
      <input type="text" id="subdomain" data-l10n-id="tunnel-setup-input-subdomain" required autofocus /><div id="label-subdomain">.{{domain}}</div>
      <input type="email" id="email" data-l10n-id="user-settings-input-email" required /><br>
      <div id="opt-in-group">
        <input type="checkbox" id="opt-in" name="opt-in" checked>
        <label for="opt-in"></label>
        <div id="opt-in-info">
          <span data-l10n-id="tunnel-setup-opt-in"></span>
          <br>
          <a href="https://www.mozilla.org/en-US/privacy/" data-l10n-id="tunnel-setup-privacy-policy"></a>
        </div>
      </div>
      <input type="text" id="reclamation-token" data-l10n-id="tunnel-setup-input-reclamation-token" /><br>
      <div id="ntp-warning" class="error hidden" data-l10n-id="tunnel-setup-time-sync"></div>
      <div id="error-reclaim" class="error hidden" data-l10n-id="tunnel-setup-reclaim-domain">
        <a href="#" data-l10n-name="tunnel-setup-reclaim-domain-click-here"></a>
      </div>
      <div id="error-setup" class="error hidden" data-l10n-id="tunnel-setup-error"></div>
      <div id="error-validation" class="error hidden"></div>
      <br>
      <button id="create-domain-button" type="button" data-l10n-id="tunnel-setup-create" disabled></button>
      <div>
        <a id="skip-subdomain-anchor" href="#" data-l10n-id="tunnel-setup-skip"></a>
      </div>
    </form>
  </body>
</html>
